<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>jQuery.Colorpicker</title>

		<!-- jQuery/jQueryUI (hosted) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>

		<!-- Markdown parser -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.min.js"></script>

		<!-- Prettyprint -->
		<link href="https://google-code-prettify.googlecode.com/svn/loader/prettify.css" rel="stylesheet" type="text/css"/>
		<script src="https://google-code-prettify.googlecode.com/svn/loader/prettify.js"></script>

		<!-- Index -->
		<style>
			body {
				font-family:			"Segoe UI", Verdana, Helvetica, Arial, sans-serif;
				font-size:				11px;
				padding:				3em 8em 1em 4em;
			}

			#menu {
				margin-bottom:			2em;
			}

			#preview {
				text-align:				center;
			}
			#preview > * {
				box-shadow:				0 0 2em silver;
				padding:				2em;
			}

			.chapter {
				-webkit-columns:		460px;
				   -moz-columns:		460px;
						columns:		460px;

				-webkit-column-gap:		4em;
				   -moz-column-gap:		4em;
						column-gap:		4em;

				-webkit-column-rule:	thin solid silver;
				   -moz-column-rule:	thin solid silver;
						column-rule:	thin solid silver;

				text-align:				justify;
			}

			h1,
			h2 {
				background:				black;
				color:					white;
				padding:				.2em .4em;
			}
			h1 {
				margin-top:				1em;
			}
			h2 {
				background:				gray;
			}

			hr {
				border-top:			double;
				margin:				2em 25%;
			}

			#footer {
				margin-top:			4em;
				text-align:			center;
				color:				silver;
				border-top:			thin solid silver;
				padding-top:		1em;
			}

			.output {
				font-family:		monospace;
				border:				solid thin silver;
				padding:			.2em .4em;
				background-color:	#cf3;
			}

			.clickable {
				cursor:				pointer;
			}

			pre {
				tab-size:			4;
				overflow-x:			auto;
				background-color:	#eee;
				-webkit-column-break-inside: avoid;
			}
		</style>
		<script>
			$(function() {
				function tabsToSpaces(line, tabsize) {
					var out		= '',
						tabsize = tabsize || 4,
						c;
					for (c in line) {
						var ch = line.charAt(c);
						if (ch === '\t') {
							do {
								out += ' ';
							} while (out.length % tabsize);
						} else {
							out += ch;
						}
					}
					return out;
				}

				function visualizeElement(element, type) {
					var code		= $(element).html().split('\n'),
						tabsize		= 4,
						minlength	= 2E53,
						l;

					// Convert tabs to spaces
					for (l in code) {
						code[l] = tabsToSpaces(code[l], tabsize);
					}


					// determine minimum length
					var minlength = 2E53;
					var first = 2E53;
					var last = 0;
					for (l in code) {
						if (/\S/.test(code[l])) {
							minlength = Math.min(minlength, /^\s*/.exec(code[l])[0].length);
							first = Math.min(first, l);
							last = Math.max(last, l);
						}
					}

					code = code.slice(first, last + 1);

					// strip tabs at start
					for (l in code) {
						code[l] = code[l].slice(minlength);
					}

					// recombine
					code = code.join('\n');

					var fragment = $('<pre class="prettyprint"><code/></pre>').text(code).insertAfter(element);
					$('<h3 class="clickable">'+type+'&hellip;</h3>').insertBefore(fragment).click(function() {
						fragment.slideToggle();
					});
				}

				// extract html fragments
				$('div.prettyprint, span.prettyprint').each(function() {
					visualizeElement(this, 'HTML');
				});

				// extract scripts
				$('script.prettyprint').each(function() {
					visualizeElement(this, 'Javascript');
				});

				// Include the readme
				var markdown = new Markdown.Converter();
				$.get('README.md', function(readme) {
					$('#readme').html(markdown.makeHtml(readme));
					$('#readme h1').each(function() {
						$(this).nextUntil('h1').wrapAll('<div class="chapter"/>');
					});
					$('#readme pre').addClass('prettyprint');
					prettyPrint();

					// build menu
					var menuitems = [];
					$('h1').each(function() {
						var text	= $(this).text(),
							id		= $(this).attr('id') || 'chapter '+text;
						$(this).attr('id', id);
						menuitems.push('<a href="#'+id+'">'+text+'</a>');
					});
					$(menu).html(menuitems.join(' &mdash; '));
				}, 'html');
			});
		</script>

		<!-- Plugin -->
		<script src="jquery.colorpicker.js"></script>
		<link href="jquery.colorpicker.css" rel="stylesheet" type="text/css"/>

		<!-- Plugin extensions -->
		<script src="i18n/jquery.ui.colorpicker-nl.js"></script>
		<script src="parts/jquery.ui.colorpicker-rgbslider.js"></script>
		<script src="parts/jquery.ui.colorpicker-memory.js"></script>
    </head>
    <body>
		<a href="https://github.com/vanderlee/colorpicker"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

		<div id="menu"></div>

		<div id="preview">
			<span id="colorpicker-preview" style="display: inline-block; vertical-align: top;"></span>
			<script>
				$(function() {
					$('#colorpicker-preview').colorpicker({
						parts: 'full',
						alpha: true
					});
				});
			</script>
		</div>

		<div id="book">
			<div id="readme"></div>

			<h1>Examples</h1>
			<div id="examples" class="chapter">
				Try it yourself&hellip;
				
				<h2>Simple popup</h2>
				<div class="prettyprint">
					<input type="text" id="colorpicker-popup" value="fe9810"/>
				</div>
				<script class="prettyprint">
					$(function() {
						$('#colorpicker-popup').colorpicker();
					});
				</script>

				<h2>Fully featured popup</h2>
				<div class="prettyprint">
					<input type="text" id="colorpicker-full" value="fe9810"/>
				</div>
				<script class="prettyprint">
					$(function() {
						$('#colorpicker-full').colorpicker({
							parts:			'full',
							alpha:			true,
							showOn:			'both',
							buttonColorize: true,
							showNoneButton: true
						});
					});
				</script>

				<h2>Custom layout</h2>
				<div class="prettyprint">
					<input type="text" id="colorpicker-layout" value="fe9810"/>
				</div>
				<script class="prettyprint">
					$(function() {
						$('#colorpicker-layout').colorpicker({
							parts:	[	'header', 'map', 'bar', 'hex',
										'hsv', 'rgb', 'alpha', 'preview',
										'swatches', 'footer'
									],
							alpha:	true,
							layout: {
								hex:		[0, 0, 2, 1],
								preview:	[2, 0, 1, 1],
								map:		[0, 1, 3, 1],
								bar:		[0, 2, 1, 4],
								swatches:	[2, 2, 1, 4],
								rgb:		[1, 2, 1, 1],
								hsv:		[1, 3, 1, 1],
								alpha:		[1, 4, 1, 1],
								lab:		[0, 5, 1, 1],
								cmyk:		[1, 5, 1, 2]
							}
						});
					});
				</script>

				<h2>Plugins</h2>
				<div class="prettyprint">
					<input type="text" id="colorpicker-plugins" value="fe9810"/>
				</div>
				<script class="prettyprint">
					$(function() {
						$('#colorpicker-plugins').colorpicker({
							parts:	[	'header', 'preview', 'hex',
										'rgbslider', 'memory', 'footer'
									],
							layout: {
								preview:	[0, 0, 1, 1],
								hex:		[1, 0, 1, 1],
								rgbslider:	[0, 1, 2, 1],
								memory:		[0, 2, 2, 1]
							}
						});
					});
				</script>
				
				<h2>Localization</h2>
				<div class="prettyprint">
					<input type="text" id="colorpicker-l10n" value="fe9810"/>
				</div>
				<script class="prettyprint">
					$(function() {
						$('#colorpicker-l10n').colorpicker({
							parts:			'draggable',
							regional:		'nl',
							showNoneButton: true,
							alpha:			true
						});
					});
				</script>

				<h2>More&hellip;</h2>
				Click here view a lot more demo's <a href="demo.html" target="_blank">Demos</a>
			</div>

			<h1>Unittest</h1>
			<div id="unittest" class="chapter">
				jQuery.colorpicker comes with a partial QUnit-based unittests.<br/>
				Click here to run the tests in a new window: <a href="unittest/index.html" target="_blank">Unittests</a>
			</div>
		</div>
		
		<div id="footer">
			Copyright &copy; 2013 Martijn van der Lee. MIT Open Source license applies.
		</div>
	</body>
</html>
